<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-06-06 22:32:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-07 17:29:55
-->
<!--
 * @Author: your name
 * @Date: 2021-06-07 16:09:34
 * @LastEditTime: 2021-06-07 17:23:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jz-ui\src\pages\cms\Comment.vue
-->

<template>
  <div>
    <!-- 表单 搜索 -->
    <div>
      <el-row>
        <el-col :span="20">
          <el-form size="small" :inline="true" :model="param">
            <el-form-item>
              <el-input v-model="param.name"  clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="loadData">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="primary" size="small">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 显示数据 -->
    <div>
      <el-table :data="categories" size="small">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="栏目名称"></el-table-column>
        <el-table-column prop="description" label="介绍"></el-table-column>
        <el-table-column prop="no" label="序号"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="deleteHandler(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {get} from '@/utils/request'
  export default {
    data(){
      return {
        categories:[],
        param:{}
      }; 
    },
    methods:{
      deleteHandler(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = "/category/deleteById"
          get(url,{id}).then(resp => {
            this.$message({ type:"success", message:resp.message })
            this.loadData();
          })
        })
      },
      loadData(){
        let url = "/category/query"
        get(url,this.param).then(resp => {
          this.categories = resp.data;
        })
      }
    },
    created(){
      // 页面渲染出来后执行查询数据操作
      this.loadData();
    }
  }
</script>

<style scoped>

</style>
